<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>Home</title>

    <!--Begin  Page Level  CSS -->
    <link href="assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">
    <link href="assets/css/mycss.css" rel="stylesheet">
    <link href="assets/css/pagination.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/layui/css/layui.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body class="sticky-header">


<!--开始左边的菜单栏-->
<div class="left-side sticky-left-side">

    <!--上方的logo-->
    <div class="logo">
        <a href="index.html"><img src="assets/images/logo.png" alt=""></a>
    </div>

    <div class="logo-icon text-center">
        <a href="index.html"><img src="assets/images/logo-icon.png" alt=""></a>
    </div>
    <!--logo-->

    <div class="left-side-inner">
        <!--Sidebar nav-->
        <ul class="nav nav-pills nav-stacked custom-nav">
            <li class="menu-list"><a href="preIndex.html"><i class="icon-home"></i> <span>后台管理</span></a>
                <ul class="sub-menu-list">
                    <li class="active"><a href="preIndex.html">后台首页</a></li>
                </ul>
            </li>
            <li class="menu-list nav-active"><a href="index.html"><i class="icon-home"></i> <span>资讯管理</span></a>
                <ul class="sub-menu-list">
                    <li class="active"><a href="index.html">查看当前资讯</a></li>
                    <li><a href="modify_information.html">修改资讯</a></li>
                </ul>
            </li>

            <li class="menu-list "><a href="#"><i class="icon-layers"></i> <span>风景名胜管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_famous_scenery.html">查看现有的风景名胜</a></li>
                    <li><a href="modify_famous_scenery.html">修改风景名胜</a></li>
                </ul>
            </li>

            <li class="menu-list"><a href="#"><i class="icon-grid"></i> <span>美食管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_delicious_food.html">查看现有的美食</a></li>
                    <li><a href="modify_delicious_food.html">修改美食信息</a></li>
                </ul>
            </li>

            <li class="menu-list "><a href="#"><i class="icon-envelope-open"></i> <span>旅游路线管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_now_route.html">查看现有的路线</a></li>
                    <li><a href="modify_route.html">修改路线</a></li>
                </ul>
            </li>

            <li class="menu-list"><a href="#"><i class="icon-loop"></i> <span>酒店的管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_now_hotel.html">查看现有的酒店</a></li>
                    <li><a href="modify_now_hotel.html">查看所有酒店的全部订单</a></li>
                    <li><a href="form-wizard.html">查看全部酒店的房源信息</a></li>
                </ul>
            </li>


            <li class="menu-list "><a href="#"><i class="icon-film"></i> <span>用户管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_user.html">查看所有的用户</a></li>
                    <li><a href="add_user.html">增加用户</a></li>
                </ul>
            </li>


            <li class="menu-list"><a href="#"><i class="icon-lock"></i> <span>账户信息</span></a>
                <ul class="sub-menu-list">
                    <li><a href="admin_information.html"> 查看信息 </a></li>
                    <li><a href="forgot-password.html"> 修改密码 </a></li>
                </ul>
            </li>

            <li><a href="calendar.html"><i class="icon-note"></i> <span>网站首页</span></a></li>
            <li><a href="http://www.pzhu.edu.cn/"><i class="icon-wrench"></i> <span>攀枝花简介</span></a></li>

        </ul>
        <!--侧边栏结束-->

    </div>
</div>
<!--End left side menu-->


<!-- 中间面板开始-->
<div class="main-content">

    <!-- 中间头部开始-->
    <div class="header-section">

        <!--控制侧边栏的伸缩状态-->
        <a class="toggle-btn"><i class="fa fa-bars"></i></a>


        <div th:replace="preIndex :: userAdminInfo">

        </div>

    </div>
    <!--头部分结束-->


    <!--中间包装部分开始-->
    <div class="wrapper">

        <!--中间部分的标题-->
        <div class="page-title-box">
            <h4 class="page-title">当前资讯 </h4>
            <ol class="breadcrumb">
                <li>
                    <a href="#">资讯管理</a>
                </li>

                <li class="active">
                    <a href="#">修改资讯</a>
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <!--中间部分的标题结束-->
        <!--Start row-->
        <div class="row">
            <div class="col-md-12">
                <div class="white-box">
                    <h2 class="header-title" style="display: inline;">资讯的信息</h2>
                    <input type="text" name="keyword" id="myInputSearch" placeholder="请输入搜索的内容。。"/>
                    <button type="button" id="mySearchBtn" class="layui-btn">搜索</button>
                    <button type="button" id="myFlashBtn" class="layui-btn layui-btn-warm">刷新</button>
                    <div class="table-responsive">
                        <table class="layui-table" lay-size="sm">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th style="text-align:center">资讯的ID</th>
                                <th style="text-align:center">资讯的名称</th>
                                <th style="text-align:center">资讯的简介</th>
                                <th style="text-align:center">资讯发表的时间</th>
                                <th style="text-align:center">操作状态</th>
                            </tr>
                            </thead>
                            <!--表的中心，在这里进行数据的回显操作-->
                            <tbody id="userPageBody">
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="5" align="center">
                                    <a href="add_information.html" target="_blank" class="layui-btn layui-btn-lg"
                                       id="addInformationBtn">添加资讯</a>
                                    <div id="Pagination" class="pagination" style="float: right"><!-- 这里显示分页 --></div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--End row-->


    </div>
    <!-- End Wrapper-->


    <!--//这里应该还需要一个分页的按键-->
    <!--Start  Footer -->
    <footer class="footer-main">Copyright &copy; 2018.Company name All rights reserved.<a target="_blank"
                                                                                          href="#">攀枝花学院</a></footer>
</div>
<!--End main content -->
<input type="hidden" id="itemId">
<button type='hidden' id='updateImag'/>


<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->

<script src="assets/js/jquery.pagination.js"></script>
<script src="assets/layui/layui.js"></script>


<script>

    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#updateImag' //绑定元素
            ,url: '/upload/big/image/information' //上传接口
            ,accept:'images'
            ,data:{
                id:function () {
                    return $("#itemId").val();
                }
            }
            ,done: function(res){
                //上传完毕回调
                layer.msg(res.message);
            }
            ,error: function(){
                //请求异常回调
                layer.msg("上传出现异常，请联系管理员！");
            }
        });
    });

    $(function () {
        //1.初始化变量
        window.pageNo = 1;
        window.keyword = "";
        //2.调用函数实现Ajax分页
        generateUserPage();

        //给搜索按钮绑定单击响应函数；
        $("#mySearchBtn").click(function () {
            var searchText = $("#myInputSearch").val();
            if (searchText == "") {
                layer.msg("请输入搜索的字符！")
                return;
            }
            ;
            window.keyword = searchText;
            generateUserPage();
        });

        // 给刷新按钮绑定单击响应函数
        $("#myFlashBtn").click(function () {
            $("#mySearchBtn").val("");
            window.keyword = "";
            window.pageNo = 1;
            generateUserPage();
        });
    });

    function generateUserPage() {
        //发送请求，获得数据
        $.ajax({
            "url": "user/get/page",
            "type": "post",
            "data": {
                "pageNo": window.pageNo,
                "keyword": window.keyword
            },
            "contentType": "application/x-www-form-urlencoded",
            // 预期服务器返回的数据
            "dataType": "json",
            "error": function (response) {
                var message = response.responseJSON.message;
                layer.msg("服务器错误，请联系管理员！！");
                return;
            },
            "success": function (response) {

                //获取分页数据
                var pageInfo = response.data;

                //生成表格数据,因为是异步请求,所以生成表格的代码必须写在success的回调函数中;
                generateUserTable(pageInfo);

                //初始化页码导航条
                generateNavigator(pageInfo);

                //绑定删除的btn函数,注意，此处是异步处理，必须在页面加载完成后，才能对删除按钮绑定单击函数，不然效果不会回显；
                bindDeleteBtnClik();
            }
        });


        function deleteUserInfoById(modelId) {
            $.get("delete/informationItme", {"informationId": modelId}, function (data) {
                // 进行浏览器的异步刷新
                layer.msg(data.message);
                generateUserPage();
            });
        }


        function bindDeleteBtnClik() {
            //点删除按钮的时候，进行模态框的回显；
            // $(".deleteBtn").click(function () {
            //发送ajax请求，获取数据
            //注意，使用的thymeleaf的属性值th:id
            // 获取到id的值
            // var InformetionId = $(this).attr("num");
            //发送异步请求;
            // $.ajax({
            //     "url": "get/Information/by/Id",
            //     "data": {
            //         "InformetionId": InformetionId
            //     },
            //     "dataType": "json",
            //     "error": function (response) {
            //         layer.msg("服务器异常，请联系管理员！");
            //         return;
            //     },
            //     "success": function (response) {
            //         if (response.result == "SUCCESS") {
            //             //获取到对象值；获得需要回显的数据；
            //             var informationItem = response.data;
            //             var informationItemId = informationItem.itemId;
            //             var informationItemName = informationItem.itemName;
            //             var informationItemDate = informationItem.itemData
            //             //把值放入模态框中；
            //             $("#modelId").val(informationItemId);
            //             $("#modelName").val(informationItemName);
            //             $("#modelDate").val(informationItemDate);
            //             $('#myModal').modal("show")
            //         } else {
            //             layer.msg("获取信息失败，请稍后再试！");
            //             return;
            //         }
            //     }
            // })
            //这里我们不使用模态框，我们使用layui的提示框，这样看起来更加的美观
            layui.use('layer', function () {
                var layer = layui.layer;

                $(".deleteBtn").on('click', function () {
                    var id = $(this).attr("num");
                    layer.open({
                        content: '<h2 style="text-align: center; font-family: 楷体">确认删除吗？</h2>'
                        , btn: ['确认删除', '取消']
                        , yes: function (index, layero) {
                            //按钮【按钮一】的回调，调用函数进行删除
                            deleteUserInfoById(id);
                            return false;
                        },
                        btn2: function (index, layero) {
                            //直接进行关闭
                        }
                        , cancel: function () {
                            //右上角关闭回调
                            // layer.msg("点击了关闭按钮！");
                            // return false;// 开启该代码可禁止点击该按钮关闭
                        }
                    });
                });
            });

            $(".addImage").click(function () {
                $("#itemId").val($(this).attr("num"));
                $("#updateImag").click();
            });
        }

        //生成表格数据
        function generateUserTable(pageInfo) {
            //清除旧的数据
            $("#userPageBody").empty();

            //获取list属性对应的数据
            var list = pageInfo.list;

            //检测list是否包含有效数据
            if (list == null || list.length == 0) {
                $("#userPageBody").append("<tr><td style='text-align:center;' colspan='6'>抱歉！为查询到任何匹配的数据！</td></tr>");
                return;
            }

            //遍历list,从data中获取数据
            for (var i = 0; i < list.length; i++) {
                var informationItem = list[i];
                var itemId = informationItem.itemId;
                var itemName = informationItem.itemName;
                var informationItemBriefIntroduction = informationItem.informationItemBriefIntroduction;
                if (informationItemBriefIntroduction == null) {
                    informationItemBriefIntroduction = "";
                }
                var itemData = informationItem.itemData;
                if (itemData == null) {
                    itemData = "";
                }

                //使用元素动态进行绑定；
                var trHTML = "<tr><td style='text-align:center'>" + (i + 1) + "</td><td style='text-align:center' ><a href='#'>" + itemName + "</a></td><td style='text-align:center' >" + informationItemBriefIntroduction + "</td><td style='text-align:center' >" + itemData + "</td><td style='text-align:center'><button type='button' class='layui-btn btn-myClass addImage'  num=" + itemId + "><i class='layui-icon'>&#xe67c;</i>上传大图</button><button type='button' class='layui-btn deleteBtn' num=" + itemId + ">删除</button><a href='update_Information?itemId=" + itemId + "' class='layui-btn btn-myClass' target='_blank'>修改</a></td></tr>";
                $("#userPageBody").append(trHTML);
            }
        }

        function generateNavigator(pageInfo) {

            // 获取分页总记录数
            var totalRecordNo = pageInfo.total;

            // 创建分页
            $("#Pagination").pagination(totalRecordNo, {
                num_edge_entries: 3, 				//边缘页数
                num_display_entries: 4, 			//主体页数
                callback: pageSelectCallback,		//点击具体页码时调用这个函数
                items_per_page: pageInfo.pageSize, 	//每页显示1项
                current_page: (pageInfo.pageNum - 1),	//当前页索引，需要将pageInfo.pageNum-1才是合适的值
                prev_text: "上一页",					//上一页按钮的文本
                next_text: "下一页",					//下一页按钮的文本
            });
        }

        function pageSelectCallback(page_index, jq) {

            //page_index+1等于要前往的页面的页码
            window.pageNo = page_index + 1;

            //调用分页函数
            generateUserPage();

            return false;
        }
    }
</script>

</body>

</html>
